// eslint-disable-next-line
import { Space, Card, Breadcrumb, Input, Table, Button, Image } from 'antd';
import { useAddress } from '../../hook/address';
import { useEffect } from 'react';
import { useHistory } from "react-router";
import AddressApi from '../../api/address';
import { UploadOutlined } from '@ant-design/icons';

// 初始值
let reset = () => console.log('1');
let alter = () => console.log("in");
let pictures = () => console.log("1");

const columns = [
    // jsx-a11y/anchor-is-valid
    { title: '取货名称', dataIndex: 'name', key: "name", align: 'center' },
    { title: '取货地址', dataIndex: 'address', key: "address", align: 'center' },
    { title: '取货点联系方式', dataIndex: 'phone', key: "phone", align: 'center' },
    { title: '营业时间', dataIndex: 'Open_hours', key: "Open_hours", align: 'center' },
    {
        title: '海报', align: 'center', dataIndex: 'imgs', key: "imgs", render: (record) => {
            return <div>
                <Image src={`http://localhost:3002${record}`} width='70px' ></Image>
            </div>
        }
    },
    {
        title: '操作', align: 'center', render: (record) => {
            return <div style={{ display: 'flex' }}>
                <Button onClick={() => reset(record._id)} style={{ color: "red", marginRight: "10px" }}>删除</Button>
                <Button onClick={() => alter(record._id)} style={{ marginRight: "10px" }}>修改</Button>
                <Button onClick={() => pictures(record._id)} icon={<UploadOutlined />} >上传图片</Button>
            </div>
        }
    },
];
// eslint-disable-next-line import/no-anonymous-default-export
export default () => {
    const history = useHistory();
    const { Search } = Input;
    // 解构拿到hook里面的数据 和操作数据的方法
    const [{ address }, { getAddress, setCurPage, setEachPage, searchAddr, amendAdderss }] = useAddress();
    const { rows, total } = address
    // 拿到id进行删除 
    reset = async (_id) => {
        await AddressApi.remove({ _id });
        getAddress();
    };
    // 跳转修改页面
    alter = async (_id) => {
        await amendAdderss(_id);
        history.push(`/info/address_amend/${_id}`)
    }
    // 上传图片
    pictures = async (_id) => {
        history.push(`/info/address_picture/${_id}`)
    }

    const onSearch = async (value) => {
        // 向状态机发送请求
        await searchAddr({ name: value })
    };

    // 当依赖发生更新， 数据从新调用
    useEffect(() => {
        getAddress(); // 直接调用hook里面传过来的数据
    }, [getAddress])

    return (
        <div style={{ margin: "30px", }}>
            <Space direction='vertical' style={{ width: '100%' }}>
                <Card>
                    <Breadcrumb style={{ marginBottom: '15px' }}>
                        <Breadcrumb.Item>自提点</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <a href="http://localhost:3000/#/info/address" >自提点列表</a>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <a href="http://localhost:3000/#/info/address_add">新增自提点</a>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <a href="http://localhost:3000/#/info/address">查询自提点</a>
                        </Breadcrumb.Item>
                    </Breadcrumb>
                    <Space>
                        <span>查询地址</span>
                        <Search placeholder="输入搜索内容" onSearch={onSearch} enterButton style={{ width: '200px' }} />
                    </Space>
                </Card>
                <Card>
                    <Table
                        // 表格列的配置描述，具体项见下表
                        columns={columns}
                        rowKey={record => record._id}
                        // 数据数组
                        dataSource={rows}
                        // 是否展示外边框和列边框
                        bordered
                        title={() => '我的提货点'}
                        pagination={{
                            total,
                            // page当前页, pageSize每页显示条数
                            onChange: (page, pageSize) => {
                                setCurPage(page); // 调用setCurPage更新状态值
                                setEachPage(pageSize);
                            },
                            pageSizeOptions: ['10', '15', '20', '50']
                        }}
                    />
                </Card>
            </Space>
        </div>
    )
}

